import React, { useState, useEffect } from 'react';
import { exportWord } from 'mhtml-to-word'
import { Link} from 'react-router-dom'
import { Popconfirm, message, Breadcrumb, Input, Row, Col, Button, Divider, Table, Modal, Form, Radio, Select } from 'antd';

import { SearchOutlined, DownloadOutlined, PrinterOutlined, EyeOutlined } from '@ant-design/icons';
import axios from 'axios';
const GeRenFeiYong = () => {
    const { Option } = Select;


    //table数据
    const [tableData, setTableData] = useState([])
    const [total, setTotal] = useState(0)
    function getTableData(nowPage) {
        axios("/zaiYuanBingRenFeiYongMingXiBiao/chaXunFenYe", {
            method: "get",
            params: { page: nowPage }
        })
            .then(res => {
                console.log(res)
                res.data.data.forEach((item, index, arr) => {
                    item.xingMing = item.ruYuanBingRenJiBenZiLiaoDengJi.xingMing
                    item.yiLiaoZhengHao = item.ruYuanBingRenJiBenZiLiaoDengJi.yiLiaoZhengHao
                    item.xingBie = item.ruYuanBingRenJiBenZiLiaoDengJi.xingBie
                    item.shenFenZhengHao = item.ruYuanBingRenJiBenZiLiaoDengJi.shenFenZhengHao
                    item.keBie = item.ruYuanBingRenJiBenZiLiaoDengJi.keBie
                    item.ruYuanRiQi = item.ruYuanBingRenJiBenZiLiaoDengJi.ruYuanRiQi
                })
                console.log(res)
                setTableData(res.data.data)
                setTotal(res.data.count)
            })
            .catch(err => {
                console.log(err)
            })
    }

    //table表头
    const columns = [
        {
            title: '姓名',
            dataIndex: 'xingMing',
            key: 'id',
            align: "center",
            width: 150

        },
        {
            title: '性别',
            dataIndex: 'xingBie',
            key: 'id',
            align: "center",
            width: 100
        },
        {
            title: '医疗卡号',
            dataIndex: 'yiLiaoZhengHao',
            key: 'id',
            align: "center",
            width: 200
        },
        {
            title: '住院号',
            dataIndex: 'zhuYuanHao',
            key: 'id',
            align: "center",
            width: 200
        },
        {
            title: '身份证号',
            dataIndex: 'shenFenZhengHao',
            key: 'id',
            align: "center",
            width: 200
        },
        {
            title: '科室',
            dataIndex: 'keBie',
            key: 'id',
            align: "center",
            width: 200
        },
        {
            title: '入院日期',
            dataIndex: 'ruYuanRiQi',
            key: 'id',
            align: "center",
            width: 200
        },
        {
            title: "操作",
            dataIndex: 'operation',
            key: 'operation',
            ellipsis: true,
            align: 'center',
            width: "300px",
            render: (text,row) => {
                return (
                    <>
                        <Row justify="center">
                            <Col span={8}><Link to={{pathname:'/zy/Chuyuanjinemingxi',state:{zhuYuanHao:row.zhuYuanHao}}}><Button type="primary" onClick={showModal} icon={<EyeOutlined />}>查看</Button></Link></Col>
                        </Row>
                    </>
                )
            }
        }
    ];

    //table分页
    const paginationProps = {
        page: 10,
        onChange: (page) => { getTableData(page) },
        total: { total },
        showQuickJumper: true,
        showTotal: (total, range) => `共${total}条数据`,
        position: ["bottomCenter"]
    }





    //模态框设置
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = async () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };









    //搜索
    const onFinish = (values) => {
        console.log('Success:', values);
        axios("/zaiYuanBingRenFeiYongMingXiBiao/chaXunFenYe", {
            params: { page: 1, ...values }
        })
            .then(res => {
                if (res.data.code === 200) {
                    res.data.data.forEach((item, index, arr) => {
                        item.xingMing = item.ruYuanBingRenJiBenZiLiaoDengJi.xingMing
                        item.yiLiaoZhengHao = item.ruYuanBingRenJiBenZiLiaoDengJi.yiLiaoZhengHao
                        item.xingBie = item.ruYuanBingRenJiBenZiLiaoDengJi.xingBie
                        item.shenFenZhengHao = item.ruYuanBingRenJiBenZiLiaoDengJi.shenFenZhengHao
                        item.keBie = item.ruYuanBingRenJiBenZiLiaoDengJi.keBie
                        item.ruYuanRiQi = item.ruYuanBingRenJiBenZiLiaoDengJi.ruYuanRiQi
                    })
                    setTableData(res.data.data)
                }
            })
            .catch(err => {
                console.log(err)
            })
    };


    function exportTable(){
        exportWord({
            filename: "患者明细信息表",
            selector: ".export",
            style:''
        })
    }

    useEffect(() => {
     getTableData(1)
	 //setTableData([{xingMing:"aaa",xingBie:"1",yiLiaoZhengHao:"123455",zhuYuanHao:"2333",shenFenZhengHao:"232434324",keBie:"1",ruYuanRiQi:"123"}])
    }, [Form])

    return (
        <div>
            <Breadcrumb style={{ marginBottom: 24 }}>
                <Breadcrumb.Item>在院计费</Breadcrumb.Item>
                <Breadcrumb.Item>个人费用明细</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 120 }}>
                <Row justify="space-between" align="middle">
                    <Col span={24}>
                        <Form
                            layout="inline"
                            onFinish={onFinish}
                        >
                            <Form.Item label="住院号：" name="zhuYuanHao" >
                                <Input placeholder="请输入住院号" />
                            </Form.Item>
                            <Form.Item label="医疗卡号：" name="yiLiaoKa">
                                <Input placeholder="请输入医疗卡号" />
                            </Form.Item>
                            <Form.Item >
                                <Button type="primary" icon={<SearchOutlined />} htmlType="submit">查询</Button>
                            </Form.Item>
                        </Form>

                    </Col>
                </Row>

                <Row style={{ marginTop: 24 }}>
                    <Col span={12}>
                        <Button type="primary" shape="round" icon={<DownloadOutlined />} onClick={exportTable}>
                            导出选中数据
                        </Button>
                    </Col>
                </Row>

            </div>
            <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 300 }}>
                <Divider orientation="left" style={{ fontWeight: 600, fontSize: 20 }}>患者明细信息表</Divider>
               <div className="export">
                <Table

                    dataSource={tableData}
                    columns={columns}
                    pagination={paginationProps}
                    onRow={record => {
                        return {
                            onClick: event => { console.log(record); sessionStorage.setItem("info", JSON.stringify(record)) }, // 点击行
                        };
                    }}
                />
                </div>

            </div>
        </div>

    );
}

export default GeRenFeiYong;
